$('.shop-box').find('span').click(function(){
    $(this).addClass('shop-on')
    .siblings().removeClass('shop-on')
    
    let index = $(this).index()
    console.log(this)

    $(this).siblings('div')
    .eq(index).addClass('shop-active')
    .siblings().removeClass('shop-active')
})
// // ..................数量..................
// $('.shop-left').on('click', '.count-input', function(){
//     $('.shop-count').toggle()
// })
// let osleft=document.querySelector('.shop-left')
// let acp=document.querySelectorAll('.shop-count>p')

// osleft.addEventListener(function(ev){
//     // ev = ev || event
//     ocin.forEach(function(ele,index){
//         ele.addEventListener('click',function(){
//               ele.value = acp.innerHTML
//           // ocin.value = ele.innerHTML
//           // ele.style.background='black'
//         })
//       })
// })

// let ocin=document.querySelector('.count-input')
// acp.forEach(function(ele,index){
//   ele.addEventListener('click',function(){
//         ocin.value = ele.innerHTML
//     // ocin.value = ele.innerHTML
//     // ele.style.background='black'
//   })
// })
// acp.forEach(function(ele,index){
//     ocin.addEventListener('focus',function(){
//         //  console.log(index)
//         if(ocin.value = ele.innerHTML){
//             console.log(acp[ocin.value])
//            acp[ocin.value].style.background='black'
//         }
        
//     })
// })

// $('.shop-count').find('p').click(function(){
//     // console.log(this.innerHTML)
//      $('.count-input'.value)==this.innerHTML
//     // console.log($('.count-input'.value))
// })
// $('.count-div').find('.count-input').click(function(){
//     console.log(this.value)
//     if($(this.value)==$('.shop-count').innerhtml()){
//         $(this.value).style.background='#ccc'
//     }
// })
// ...渲染数据...
let arr = JSON.parse(localStorage.getItem('shopArr'))
console.log(arr)
let oDetailTxt = document.querySelector('.detailTxt')
let oList = document.querySelector('.shop-list')
console.log(oList)
let sum = document.querySelector('.sum')
// if (arr === null) {
//     oDetailTxt.style.display = 'block'
// } else {
//     oDetailTxt.style.display = 'none'
arr.forEach(function(ele){
    let str=`   <div class="all-shop" data-id="${ele.id}">
    <div>
        <div><input type="checkbox" ></div>
        <div>
            <img src="${ele.pic}" alt="">
        </div>
        <div>
            <p>${ele.name}</p>
            <p>
                <span>容量</span><span>${ele.number}</span>
            </p>
            <p>${ele.price}</p>
        </div>
    </div>
    <div>
        数量
    </div>
    <div class="count-div">
        <input type="text" value="${ele.count}" class="count-input">
        <div class="shop-count ">
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
            <p>5</p>
            <p>6</p>
            
        </div>
    </div>
    <div class="shop-del">
      x
    </div>
</div>`
oList.innerHTML += str
})
let oInpAll = document.querySelector('#checkboxAll')
let aInp = document.querySelectorAll('.all-shop input[type=checkbox]')
let count = 0
// -----------------数量-------------
$('.shop-left').on('click', '.count-input', function(){
    $(this).siblings('div').toggle()
 })
 $('.shop-left').on('click','.shop-count p',function(){
     let id = $(this).parent().parent().siblings('div').parent().attr('data-id')
     $(this).parent().siblings('input').val($(this).text())
 
     let num =  $(this).text()
     $(this).parent().hide()
 
 
 //    console.log($(this).parent().parent().siblings('div').parent().attr('data-id'))
     // $.each(arr,function(e,i){
     //     if(e.id == $(this).parent().parent().siblings('div').parent().attr('data-id') ){
     //         alert(1)
     //         e.count =  num
     //         console.log($(this).parent().parent().siblings('div').parent().attr('data-id'))
     //         // console.log(num)
     //         console.log(e.id)
         
     //     }
 
     //     localStorage.setItem('shopArr', JSON.stringify(arr))
     // })  
 
     arr.forEach(function(ele,index){
         let beforeNum = ele.count
         if(ele.id == id){
             ele.count = num
             sum.innerHTML =  (Number(sum.innerHTML) - ele.price * beforeNum).toFixed(2)
             sum.innerHTML = (Number(sum.innerHTML) + ele.price * ele.count).toFixed(2)
         }

     })
     localStorage.setItem('shopArr', JSON.stringify(arr))
 })
window.onload = function(){
    sum.innerHTML = 0.00
    arr.forEach(function(ele,index){
        if(ele.flag){
            aInp[index].checked = true
            sum.innerHTML = (Number(sum.innerHTML) + arr[index].price * arr[index].count).toFixed(2)
        }else{
            aInp[index].checked = false
        }
    })
}

arr.forEach(function(ele,index){
    sum.innerHTML = (Number(sum.innerHTML) + ele.price * ele.count).toFixed(2)
})

oInpAll.addEventListener('change', function () {
    if (this.checked) {
        aInp.forEach(function (ele) {
            ele.checked = true
            count = aInp.length
        })
        //计算价格
        arr.forEach(function (ele, index) {
            // console.log(ele.price.slice(1) * ele.count)
            ele.flag = true
            sum.innerHTML = (Number(sum.innerHTML) + ele.price * ele.count).toFixed(2)
        })
        localStorage.setItem('shopArr',JSON.stringify(arr))
    } else {
        aInp.forEach(function (ele) {

            ele.checked = false
            count = 0
           
            arr.forEach(function (e, i) {
                // console.log(ele.price.slice(1) * ele.count)
               e.flag = false
            }) 
            localStorage.setItem('shopArr',JSON.stringify(arr))
        })
        sum.innerHTML = '0.00'
    }
})
aInp.forEach(function (ele, index) {
    ele.addEventListener('change', function () {
        // 算总价
        let id = this.parentNode.parentNode.parentNode.getAttribute('data-id')
        // console.log(this.parentNode.parentNode.parentNode.getAttribute('data-id'))
        if (ele.checked) {
            count++
            arr.forEach(function (ele, index) {
                if (ele.id === id) {
                    ele.flag = true
                    sum.innerHTML = (Number(sum.innerHTML) + ele.price * ele.count).toFixed(2)
                    localStorage.setItem('shopArr',JSON.stringify(arr))
                }
            })
            // console.log(arr)
        } else {
            count--
            arr.forEach(function (ele, index) {
                if (ele.id === id) {
                    ele.flag = false
                    sum.innerHTML =  (Number(sum.innerHTML) - ele.price * ele.count).toFixed(2)
                    localStorage.setItem('shopArr',JSON.stringify(arr))
                }
            })
        }

        if (count === aInp.length) {
            oInpAll.checked = true
        } else {
            oInpAll.checked = false
        }
    })
})



let oSum = document.querySelector('.sum1')
console.log(oSum)
let aSum = document.querySelector('.sum2')
console.log(aSum)
// console.log(sum.innerHTML)
// console.log(typeof(sum.innerHTML))
oSum.innerHTML = parseInt(sum.innerHTML).toFixed(2)
aSum.innerHTML =parseInt(sum.innerHTML - 100).toFixed(2)
// $('.shop-left').on('click','count-input',function(){
//     $('.shop-count').toggle()
// })







                    // let osleft=document.querySelector('.shop-left')
                    // osleft.addEventListener('click',function(ev){
                    //     // ev = ev || event
                    //     if(ev.target.className == 'count-input'){
                    //         ev.target.nextElementSibling.style.display = 'block'
                    //         console.log(ev.target.className)
                    //         // console.log(ev.target.tagName.toLowerCase().value)
                    //     }
                    //     else if(ev.target.children[0].className=='P'){
                    //         ev.target.style.display = 'none'
                    //     }
                    // })
    // if(ev.target.nextElementSibling.childNodes=ev.target.tagName.toLowerCase().value){
    //     ev.target.nextElementSibling.style.display = 'none'
    // }

// window.addEventListener('click',function(ev){
//     ev.target.nextElementSibling.style.display = 'none'
// })

// 购物车修改数量和价格部分
// console.log($('.count-input').val())
// console.log($('.shop-count').children().eq(0).text())

// var shuzi = $(".all-shop").index(this)
// console.log(shuzi)
// $(".all-shop").click(function(){
//     var shuzi = $(".all-shop").index(this)
//     $(".shop-count p").click(function () {
//         var inde= $(".shop-count p").index(this);

//         // var shu=$(".all-shop").index(this)
//         if(shuzi === inde){
//         // $('.count-input').val()===inde+1
        
//         //把数据写进input的value里面
//         $('.all-shop').eq(shuzi).children().children().val(inde+1);
//         $('.shop-count').hide()
//         }
//      });  
// })

// $(".shop-count p").click(function () {
//     var inde= $(".shop-count p").index(this);
//     // var shu=$(".all-shop").index(this)
//     // if()
//     $('.count-input').val()===inde+1
//     //把数据写进input的value里面
//     $('.count-input').val(inde+1);
//     $('.shop-count').hide()
//  });





    // for(var d=1;d<6;d++){
    //     console.log(d)
    //     if($('.shop-count p').eq(d).click(function(){
    //         console(d)
    //     })
    //     )
    //  }

    // console.log($('.shop-count p').eq(0).text())

    































// acp.forEach(function(ele,index){
//   ele.addEventListener('click',function(){
//         ocin.value = ele.innerHTML
//     // ocin.value = ele.innerHTML
//     // ele.style.background='black'
//   })
// })
// console.log(sum.innerHTML)
// ...删除...
oList.addEventListener('click',function(ev){
    if (ev.target.className == 'shop-del') {
        ev.target.parentNode.remove()
        var id = ev.target.parentNode.getAttribute('data-id')
        
        arr.forEach(function (ele, index) {
            if (ele.id === id) {
                arr.splice(index, 1)
            }
        })
        
        localStorage.setItem('shopArr', JSON.stringify(arr))
    }
})
